import React from 'react';

export interface IServiceDetailProps {
	dataSource: Record<string, any>;
	[key: string]: any;
}

import { SERVICES } from '@/common';
import { Card, Tooltip } from 'antd';
import styles from './index.less';

const ServiceDetail: React.FC<IServiceDetailProps> = ({ dataSource }) => {
	const [index, setIndex] = React.useState(() => {
		return 0;
	});

	return (
		<div className={styles.container}>
			<Card>
				<h3>车辆信息</h3>
				<section className={styles.detail}>
					<div className={styles.left}>
						<div className={styles.image_detail}>
							<img src={SERVICES + dataSource?.photos?.[index]?.url} alt="" />
						</div>
						<ul
							className={styles.image}
							onMouseOver={(e) => {
								let curIndex;
								if (e.target.nodeName === 'LI') {
									curIndex = parseInt(e.target.dataset.index);
									setIndex(curIndex);
								}
								if (e.target.nodeName === 'IMG') {
									curIndex = parseInt(e.target.parentNode.dataset.index);
									setIndex(curIndex);
								}
							}}
						>
							{dataSource?.photos?.map((item: Record<string, any>, index: number) => {
								return (
									<li key={item.id} data-index={index} className={styles.image_item}>
										<img src={SERVICES + item.url} alt="" />
									</li>
								);
							})}
						</ul>
					</div>
					<div className={styles.right}>
						<div>
							发布者： <span className={styles.right_text}>{dataSource?.shop?.name}</span>
						</div>
						<div>
							店铺名：{' '}
							<span className={styles.right_text}>
								{<Tooltip title={dataSource?.shopName}>{dataSource?.shopName || '-'}</Tooltip>}
							</span>
						</div>
						<div>
							类&nbsp;&nbsp;&nbsp;&nbsp;别：
							<span className={styles.right_text}>{dataSource?.category}</span>
						</div>
						<div>
							服务点：
							<span className={styles.right_text}>
								{
									<Tooltip title={dataSource?.service_point}>
										{dataSource?.service_point || '-'}
									</Tooltip>
								}
							</span>
						</div>
					</div>
				</section>
				<h3>基本信息</h3>
				<section className={styles.detail}>
					<div className={styles.detail_text}>
						<span>省：{dataSource?.province}</span>
						<span>市：{dataSource?.city}</span>
					</div>
				</section>
				<h3>服务描述</h3>
				<section className={styles.detail}>
					<div className={styles.detail_description}>
						<p>{dataSource?.description || '暂时没有描述'}</p>
					</div>
				</section>
			</Card>
		</div>
	);
};

export default ServiceDetail;
